<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
 
    .states :hover {
        fill: red;
        stroke-width: 2px;
    }
 
    .state-borders {
        fill: none;
        stroke: #fff;
        stroke-width: 0.5px;
        stroke-linejoin: round;
        stroke-linecap: round;
        pointer-events: none;
    }
 
</style>
    <link href="../cn/style.css" rel="stylesheet">
</head>
<body>
<svg id="ssvg" width="900" height="600" style="border:1px gainsboro solid; z-index:1; " ></svg>
</body>
</html>



<script src="d3.v4.min.js"></script>
<script src="topojson.v2.min.js"></script>
<script src="../jquery.js"></script>

<script src="../cn/cyto/dist/cyto.js"></script>
<script src="../cn/bluebird.min.js"></script>
<script src="../cn/fetch.umd.js"></script>
<script src="../cn/popper.js"></script>
<script src="../cn/tippy.all.js"></script>
<script src="../cn/cytoscape-popper.js"></script>

<script>

    svg = d3.select("#ssvg")
            width = svg.attr("width"),
            height = svg.attr("height");
 
    var projection = d3.geoMercator()
            .center([107, 31])
            .scale(900)
            .translate([width/2, height/2+height/6])
    var path = d3.geoPath()
            .projection(projection);
 
    d3.json("china.json", function(error, us) {
        if (error) throw error;
 
        var g = svg
			.selectAll("path")
			.data(us.features)
			.enter()
			.append("path")
			.attr('stroke','white')
			.attr('fill','lightgray')
			.attr("d", path)
			.append('title')
			.text(function(d){
				a=d
				return d.properties.name
			});
 
        svg.append("path")
                .attr("class", "state-borders")
                .attr("d", path(topojson.mesh(us, us, function(a, b) { return a !== b; })));
		
		
		var lineFunction = d3.line()
				.x(function (d) {
					return d.x;
				})
				.y(function (d) {
					return d.y;
				})
				.curve(d3.curveBasis);
				
		var points = [[
			{"y":29.160752671000068,"x":113.56942793100006 },
			{"y":35.160752671000068,"x":113.56942793100006 }
		]]
		svg.append("path")
			.attr("d", lineFunction(points))
			.attr("stroke", 'green') //颜色
			.attr("fill", "none")
			.attr("stroke-width", "2");
		/*
		a={"value":[
			{"Latitude":29.160752671000068,"Longitude":113.56942793100006 },
			{"Latitude":35.160752671000068,"Longitude":113.56942793100006 }
		]}
		var circle = svg.selectAll("circle")
			.data(a.value)
			.enter()
			.append("circle")
			.attr('stroke','black')
			.attr('fill','black')
			.attr("d", path)
			.attr("r", 2)
			.attr("transform", function(d) {
				return "translate(" + projection([
							d.Longitude,
							d.Latitude
						]) + ")";
			});
			
			var data = [
            [{
                x: 110.85099,
                y: 39.25962166
            }, {
                x: 134.537944,
                y: 34.63874
            }],
            [{
                x: 120.98670782,
                y: 34.99922008
            }, {
                x: 121.98670782,
                y: 35.998
            }, {
                x: 123.678,
                y: 34.744
            }, {
                x: 124.101,
                y: 33.739
            }],
            [{
                x: 123.98670782,
                y: 33.99922008
            }, {
                x: 112.98670782,
                y: 34.998
            }, {
                x: 123.678,
                y: 36.744
            }, {
                x: 134.25,
                y: 33.759
            }]
        ];
		var lineFunction = d3.line()
                    .x(function (d) {
                        return d.x;
                    })
                    .y(function (d) {
                        return d.y;
                    })
                    .curve(d3.curveBasis);
					
		
		svg.append("path")
                    .attr("d", lineFunction(points))
                    .attr("stroke", 'green') //颜色
                    .attr("fill", "none")
                    .attr("stroke-width", "2");
					
		svg.append("circle")
			.attr("r", 1)
			.attr('stroke','black')
			.attr("fill", 'red')
			.append('animateMotion')
			.attr('path', lineFunction(points))
			.attr('rotate', "auto")
			.attr('dur', "10s")
			.attr('repeatCount', "indefinite"); 
			
			
		
		var lineFunction = d3.line()
				.x(function (d) {
					return d.x;
				})
				.y(function (d) {
					return d.y;
				})
				.curve(d3.curveBasis);
				
		var data = [[
			{"y":29.160752671000068,"x":113.56942793100006 },
			{"y":35.160752671000068,"x":113.56942793100006 }
		]]

		svg.append("path")
			.attr("d", lineFunction(points))
			.attr("stroke", 'green') //颜色
			.attr("fill", "none")
			.attr("stroke-width", "2"); */
    });
 
			
	
	
	
	
		
		/*
		var data = [
            [{
                x: 110.85099,
                y: 39.25962166
            }, {
                x: 134.537944,
                y: 34.63874
            }],
            [{
                x: 120.98670782,
                y: 34.99922008
            }, {
                x: 121.98670782,
                y: 35.998
            }, {
                x: 123.678,
                y: 34.744
            }, {
                x: 124.101,
                y: 33.739
            }],
            [{
                x: 123.98670782,
                y: 33.99922008
            }, {
                x: 112.98670782,
                y: 34.998
            }, {
                x: 123.678,
                y: 36.744
            }, {
                x: 134.25,
                y: 33.759
            }]
        ];
		var lineFunction = d3.line()
                    .x(function (d) {
                        return d.x;
                    })
                    .y(function (d) {
                        return d.y;
                    })
                    .curve(d3.curveBasis);
					
		
		svg.append("path")
                    .attr("d", lineFunction(points))
                    .attr("stroke", 'green') //颜色
                    .attr("fill", "none")
                    .attr("stroke-width", "2");
					
		svg.append("circle")
			.attr("r", 1)
			.attr('stroke','black')
			.attr("fill", 'red')
			.append('animateMotion')
			.attr('path', lineFunction(points))
			.attr('rotate', "auto")
			.attr('dur', "10s")
			.attr('repeatCount', "indefinite"); 
		
		//test();
		
		function test(){
		
			var toJson = function(obj){ return obj.json(); };
			var toText = function(obj){ return obj.text(); };
			var graphP = fetch('tokyo-railways.json').then(toJson);
			var styleP = fetch('tokyo-railways.cycss').then(toText);
			
			Promise.all([graphP, styleP]).then(initLines);
			function initLines(prom){
				var elements = prom[0].elements;
				//elements.forEach(function(ele){console.log(ele.id());});
				var styleJson = prom[1];
				
				var cy = cytoscape({
					container: document.getElementById('cy'),
					layout: { name: 'preset' },
					style: styleJson,
					elements: elements,
					motionBlur: true,
					selectionType: 'single',
					boxSelectionEnabled: false
				});
				
				//then mendData
				cy.startBatch();
				var nodes = cy.nodes();
				/*for( var i = 0; i < nodes.length; i++ ){
					var node = nodes[i];
					var name = node.data('station_name');
				}
				nodes.forEach(function(ele){
					console.log(ele.id());
					ele.data('station_name');
				});
				cy.endBatch();
				
				var centerPoint = {
					group: 'nodes',
					data: {
					  id: 0
					}, 
					position: {
						x : 10700.00000000,
						y : -3100.00000000
					}, 
					selected: false
				}
				cy.add(centerPoint);
				cy.center(centerPoint);
			}
		};
		*/
 
 
</script>